<!--用户个人页-->
<template>
    <div class="profile-container">
        <card class="container">
            <div class="header">
                <img :src="require('@/assets/images/test.jpg')" class="bg">
                <img :src="require('@/assets/images/avatar.png')" class="avatar">
                <p class="name">行者、空山</p>
                <p class="desc">行一度空山，度一世无忧...</p>
            </div>
            <div class="form">
                <div class="form-title">
                    <p>基础信息</p>
                    <p class="subtitle">你可以在这修改一些个人基础信息</p>
                </div>
                <div class="form-input">
                        <div class="line">
                            <p class="label">FIRST NAME</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                        <div class="line">
                            <p class="label">LAST NAME</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                        <div class="line">
                            <p class="label">邮箱地址</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                        <div class="line">
                            <p class="label">联系方式</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                        <div class="line">
                            <p class="label">所在学校</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                        <div class="line">
                            <p class="label">所在学院</p>
                            <div class="input">
                                <a-input placeholder="Basic usage" size="large"/>
                            </div>
                        </div>
                </div>
                <div class="submit">
                    <my-button color="green">SAVE SETTING</my-button>
                </div>
            </div>
        </card>
    </div>
</template>

<script>
    import Card from '@/components/card/Card';
    export default {
        name: 'Profile',
        props: {
        },
        components: {
            Card,
        },
        data () {
            return {
                visible: false,
            };
        },
        mounted () {

        },
        methods: {
            showModal () {
                this.visible = true;
            },
            handleOk (e) {
                console.log(e);
                this.visible = false;
            },
        },
    };
</script>
<style scoped lang="scss">
.profile-container{
    background-color: #FBFBFD;
    padding: 30px;
    .container{
        min-height: 882px;
        overflow: hidden;
        .header{
            position: relative;
            height: 298px;
            overflow: hidden;
            .bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                filter: blur(5px);
            }
            .avatar{
                position: absolute;
                left: 50%;
                top: 49px;
                transform: translateX(-50%);
                width: 112px;
                height: 112px;
                border-radius: 50%;
            }
            .name{
                font-size:22px;
                font-weight:500;
                line-height:32px;
                color: #ffffff;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 182px;
                transform: translateX(-50%);

            }
            .desc{
                color: #ffffff;
                font-size:22px;
                font-weight:500;
                line-height:32px;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 215px;
                transform: translateX(-50%);

            }
        }
        .form{
            .form-title{
                padding: 30px;
                border-bottom: 1px solid #EAEDF3;
                p{
                    font-size: 21px;
                    font-weight: 500;
                    line-height: 35px;
                    color: #3E3F42;
                    margin: 0;
                }
                p.subtitle{
                    font-size: 14px;
                    color: #9EA0A5;
                    font-weight: normal;
                }
            }
            .form-input{
                padding: 30px 30px 20px 30px;
                overflow: hidden;
                border-bottom: 1px solid #EAEDF3;
                .line{
                    float: left;
                    width: 50%;
                    margin-bottom: 20px;
                    p.label{
                        line-height: 14px;
                        font-size: 12px;
                        color: #9EA0A5;
                        margin-bottom: 9px;
                    }
                    div.input{
                        width: 330px;
                    }
                }
            }
            .submit{
                margin-left: 30px;
                margin-top: 30px;
            }
        }
    }
}
</style>
